<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Orientation Sensor</title>
  <meta content="WD" name="w3c-status">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet">
  <link href="https://www.w3.org/2008/site/images/favicon.ico" rel="icon">
  <link href="https://www.w3.org/TR/orientation-sensor/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Orientation Sensor</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C First Public Working Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://www.w3.org/TR/1970/WD-orientation-sensor-19700101/">https://www.w3.org/TR/1970/WD-orientation-sensor-19700101/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/orientation-sensor/">https://www.w3.org/TR/orientation-sensor/</a>
     <dt>Editor's Draft:
     <dd><a href="https://w3c.github.io/orientation-sensor/">https://w3c.github.io/orientation-sensor/</a>
     <dt>Version History:
     <dd><a href="https://github.com/w3c/orientation-sensor/commits/gh-pages/index.bs">https://github.com/w3c/orientation-sensor/commits/gh-pages/index.bs</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-device-apis@w3.org?subject=%5Borientation-sensor%5D%20YOUR%20TOPIC%20HERE">public-device-apis@w3.org</a> with subject line “<kbd>[orientation-sensor] <i data-lt>… message topic …</i></kbd>” (<a href="https://lists.w3.org/Archives/Public/public-device-apis/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="78325"><a class="p-name fn u-url url" href="http://intel.com/">Mikhail Pozdnyakov</a> (<span class="p-org org">Intel Corporation</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="78335"><a class="p-name fn u-url url" href="http://intel.com/">Alexander Shalamov</a> (<span class="p-org org">Intel Corporation</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="57705"><a class="p-name fn u-url url" href="http://intel.com/">Kenneth Rohde Christiansen</a> (<span class="p-org org">Intel Corporation</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="41974"><a class="p-name fn u-url url" href="http://intel.com/">Anssi Kostiainen</a> (<span class="p-org org">Intel Corporation</span>)
     <dt>Bug Reports:
     <dd><a href="https://www.github.com/w3c/orientation-sensor/issues/new">via the w3c/orientation-sensor repository on GitHub</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/orientation-sensor">web-platform-tests on GitHub</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines a base orientation sensor interface and concrete sensor subclasses to monitor the device’s

  physical orientation in relation to a stationary three dimensional Cartesian coordinate system.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of
  its publication. Other documents may supersede this document. A list of
  current W3C publications and the latest revision of this technical report
  can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
  index at https://www.w3.org/TR/.</a></em> </p>
   <p> This document was published by the <a href="https://www.w3.org/das/">Devices and Sensors Working Group</a> as a Working Draft. This document is intended to become a W3C Recommendation. </p>
   <p> If you wish to make comments regarding this document, please send them to <a href="mailto:public-device-apis@w3.org?Subject=%5Borientation-sensor%5D%20PUT%20SUBJECT%20HERE">public-device-apis@w3.org</a> (<a href="mailto:public-device-apis-request@w3.org?subject=subscribe">subscribe</a>, <a href="https://lists.w3.org/Archives/Public/public-device-apis/">archives</a>).
	When sending e-mail,
	please put the text “orientation-sensor” in the subject,
	preferably like this:
	“[orientation-sensor] <em>…summary of comment…</em>”.
	All comments are welcome. </p>
   <p> This document is a <strong>First Public Working Draft</strong>. </p>
   <p> Publication as a First Public Working Draft does not imply endorsement by the W3C
  Membership. This is a draft document and may be updated, replaced or
  obsoleted by other documents at any time. It is inappropriate to cite this
  document as other than work in progress. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/43696/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#usecases-requirements"><span class="secno">2</span> <span class="content">Use Cases and Requirements</span></a>
    <li><a href="#examples"><span class="secno">3</span> <span class="content">Examples</span></a>
    <li><a href="#security-and-privacy"><span class="secno">4</span> <span class="content">Security and Privacy Considerations</span></a>
    <li><a href="#model"><span class="secno">5</span> <span class="content">Model</span></a>
    <li>
     <a href="#api"><span class="secno">6</span> <span class="content">API</span></a>
     <ol class="toc">
      <li>
       <a href="#orientationsensor-interface"><span class="secno">6.1</span> <span class="content">The OrientationSensor Interface</span></a>
       <ol class="toc">
        <li><a href="#orientationsensor-quaternion"><span class="secno">6.1.1</span> <span class="content">OrientationSensor.quaternion</span></a>
        <li><a href="#orientationsensor-populatematrix"><span class="secno">6.1.2</span> <span class="content">OrientationSensor.populateMatrix()</span></a>
       </ol>
      <li><a href="#absoluteorientationsensor-interface"><span class="secno">6.2</span> <span class="content">The AbsoluteOrientationSensor Interface</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">7</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#conformance"><span class="secno">8</span> <span class="content">Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>The Orientation Sensor API extends the Generic Sensor API <a data-link-type="biblio" href="#biblio-generic-sensor">[GENERIC-SENSOR]</a> to provide generic information describing the device’s physical orientation
in relation to a three dimensional Cartesian coordinate system.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#absoluteorientationsensor" id="ref-for-absoluteorientationsensor">AbsoluteOrientationSensor</a></code> class inherits from the <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor">OrientationSensor</a></code> interface and
describes the device’s physical orientation in relation to the <a data-link-type="dfn" href="#earths-reference-coordinate-system" id="ref-for-earths-reference-coordinate-system">Earth’s reference coordinate system</a>.</p>
   <p>Other subclasses describe the orientation in relation to other stationary
directions, such as true north, or non stationary directions, like in
relation to a devices own z-position, drifting towards its latest most stable
z-position.</p>
   <p>The data provided by the <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor①">OrientationSensor</a></code> subclasses are similar to data from <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/orientation-event#deviceorientation_event" id="ref-for-deviceorientation_event">DeviceOrientationEvent</a></code>, but the Orientation Sensor API has the following significant differences:</p>
   <ol>
    <li data-md>
     <p>The Orientation Sensor API represents orientation data in WebGL-compatible formats (quaternion, rotation matrix).</p>
    <li data-md>
     <p>The Orientation Sensor API satisfies stricter latency requirements.</p>
    <li data-md>
     <p>Unlike <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/orientation-event#deviceorientation_event" id="ref-for-deviceorientation_event①">DeviceOrientationEvent</a></code>, the <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor②">OrientationSensor</a></code> subclasses explicitly define which <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level">low-level</a> motion sensors are used to obtain the orientation data, thus obviating possible interoperability issues.</p>
    <li data-md>
     <p>Instances of <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor③">OrientationSensor</a></code> subclasses are configurable via <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/generic-sensor/#dictdef-sensoroptions" id="ref-for-dictdef-sensoroptions">SensorOptions</a></code> constructor parameter.</p>
   </ol>
   <h2 class="heading settled" data-level="2" id="usecases-requirements"><span class="secno">2. </span><span class="content">Use Cases and Requirements</span><a class="self-link" href="#usecases-requirements"></a></h2>
   <p>The use cases and requirements are discussed in the <cite><a href="https://w3c.github.io/motion-sensors/#usecases-and-requirements"> Motion Sensors Explainer</a></cite> document.</p>
   <h2 class="heading settled" data-level="3" id="examples"><span class="secno">3. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <div class="example" id="example-7bd85f43">
    <a class="self-link" href="#example-7bd85f43"></a> 
<pre class="highlight"><c- kr>const</c-> sensor <c- o>=</c-> <c- k>new</c-> AbsoluteOrientationSensor<c- p>();</c->
<c- kr>const</c-> mat4 <c- o>=</c-> <c- k>new</c-> Float32Array<c- p>(</c-><c- mi>16</c-><c- p>);</c->
sensor<c- p>.</c->start<c- p>();</c->
sensor<c- p>.</c->onerror <c- o>=</c-> event <c- p>=></c-> console<c- p>.</c->log<c- p>(</c->event<c- p>.</c->error<c- p>.</c->name<c- p>,</c-> event<c- p>.</c->error<c- p>.</c->message<c- p>);</c->

sensor<c- p>.</c->onchange <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  sensor<c- p>.</c->populateMatrix<c- p>(</c->mat4<c- p>);</c->
<c- p>};</c->
</pre>
   </div>
   <div class="example" id="example-20b8b3d6">
    <a class="self-link" href="#example-20b8b3d6"></a> 
<pre class="highlight"><c- kr>const</c-> sensor <c- o>=</c-> <c- k>new</c-> AbsoluteOrientationSensor<c- p>({</c-> frequency<c- o>:</c-> <c- mi>60</c-> <c- p>});</c->
<c- kr>const</c-> mat4 <c- o>=</c-> <c- k>new</c-> Float32Array<c- p>(</c-><c- mi>16</c-><c- p>);</c->
sensor<c- p>.</c->start<c- p>();</c->
sensor<c- p>.</c->onerror <c- o>=</c-> event <c- p>=></c-> console<c- p>.</c->log<c- p>(</c->event<c- p>.</c->error<c- p>.</c->name<c- p>,</c-> event<c- p>.</c->error<c- p>.</c->message<c- p>);</c->

<c- a>function</c-> draw<c- p>(</c->timestamp<c- p>)</c-> <c- p>{</c->
  window<c- p>.</c->requestAnimationFrame<c- p>(</c->draw<c- p>);</c->
  <c- k>try</c-> <c- p>{</c->
    sensor<c- p>.</c->populateMatrix<c- p>(</c->mat4<c- p>);</c->
  <c- p>}</c-> <c- k>catch</c-><c- p>(</c->e<c- p>)</c-> <c- p>{</c->
    <c- c1>// mat4 has not been updated.</c->
  <c- p>}</c->
  <c- c1>// Drawing...</c->
<c- p>}</c->

window<c- p>.</c->requestAnimationFrame<c- p>(</c->draw<c- p>);</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="4" id="security-and-privacy"><span class="secno">4. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security-and-privacy"></a></h2>
   <p>There are no specific security and privacy considerations
beyond those described in the Generic Sensor API <a data-link-type="biblio" href="#biblio-generic-sensor">[GENERIC-SENSOR]</a>.</p>
   <h2 class="heading settled" data-level="5" id="model"><span class="secno">5. </span><span class="content">Model</span><a class="self-link" href="#model"></a></h2>
   <p>The <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor④">OrientationSensor</a></code> class extends the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/generic-sensor/#sensor" id="ref-for-sensor">Sensor</a></code> class and provides generic interface
representing device orientation data.</p>
   <p>To access the orientation sensor’s <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading">latest reading</a>, the user agent must invoke <a data-link-type="dfn" href="https://www.w3.org/TR/generic-sensor/#request-sensor-access" id="ref-for-request-sensor-access">request sensor access</a> abstract operation for each of the <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level①">low-level</a> sensors used by the concrete orientation sensor. The table below
describes mapping between concrete orientation sensors and permission tokens defined by <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level②">low-level</a> sensors.</p>
   <table class="def">
    <thead>
     <tr>
      <th>OrientationSensor sublass
      <th>Permission tokens
    <tbody>
     <tr>
      <td><code class="idl"><a data-link-type="idl" href="#absoluteorientationsensor" id="ref-for-absoluteorientationsensor①">AbsoluteOrientationSensor</a></code>
      <td>"<code>accelerometer</code>", "<code>gyroscope</code>", "<code>magnetometer</code>"
   </table>
   <p>A <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading①">latest reading</a> per <a data-link-type="dfn" href="https://w3c.github.io/sensors#sensor" id="ref-for-sensor①">sensor</a> of orientation type includes an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-entry" id="ref-for-map-entry">entry</a> whose <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-key" id="ref-for-map-key">key</a> is "quaternion" and whose <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-value" id="ref-for-map-value">value</a> contains a four element <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a>.
The elements of the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a> are equal to components of a unit quaternion <a data-link-type="biblio" href="#biblio-quaternions">[QUATERNIONS]</a> [V<sub>x</sub> * sin(θ/2), V<sub>y</sub> * sin(θ/2), V<sub>z</sub> * sin(θ/2), cos(θ/2)] where V is
the unit vector (whole elements are V<sub>x</sub>, V<sub>y</sub>, and V<sub>z</sub>) representing the axis of rotation, and θ is the rotation angle about the axis defined by the unit vector V.</p>
   <p class="note" role="note"><span>Note:</span> The quaternion components are arranged in the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list②">list</a> as [q<sub>1</sub>, q<sub>2</sub>, q<sub>3</sub>, q<sub>0</sub>] <a data-link-type="biblio" href="#biblio-quaternions">[QUATERNIONS]</a>, i.e. the components representing the vector part of the quaternion go first and the scalar part component which
is equal to cos(θ/2) goes after. This order is used for better compatibility with the most of the existing WebGL frameworks,
however other libraries could use a different order when exposing quaternion as an array, e.g. [q<sub>0</sub>, q<sub>1</sub>,
q<sub>2</sub>, q<sub>3</sub>].</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#absoluteorientationsensor" id="ref-for-absoluteorientationsensor②">AbsoluteOrientationSensor</a></code> class is a subclass of <code class="idl"><a data-link-type="idl" href="#orientationsensor" id="ref-for-orientationsensor⑤">OrientationSensor</a></code> which represents the <a data-link-type="dfn" href="https://w3c.github.io/motion-sensors#absolute-orientation" id="ref-for-absolute-orientation">Absolute
Orientation Sensor</a>.</p>
   <p>The absolute orientation sensor is a <a data-link-type="dfn" href="https://w3c.github.io/sensors#high-level" id="ref-for-high-level">high-level</a> sensor which is created through <a data-link-type="dfn" href="https://w3c.github.io/sensors#sensor-fusion" id="ref-for-sensor-fusion">sensor-fusion</a> of the <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level③">low-level</a> motion sensors:</p>
   <ul>
    <li data-md>
     <p>accelerometer that measures <a data-link-type="dfn" href="https://w3c.github.io/accelerometer#acceleration" id="ref-for-acceleration">acceleration</a>,</p>
    <li data-md>
     <p>gyroscope that measures <a data-link-type="dfn" href="https://w3c.github.io/gyroscope#angular-velocity" id="ref-for-angular-velocity">angular velocity</a>, and</p>
    <li data-md>
     <p>magnetometer that measures <a data-link-type="dfn" href="https://w3c.github.io/magnetometer#magnetic-field" id="ref-for-magnetic-field">magnetic field</a>.</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> Corresponding <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level④">low-level</a> sensors are defined in <a data-link-type="biblio" href="#biblio-accelerometer">[ACCELEROMETER]</a>, <a data-link-type="biblio" href="#biblio-gyroscope">[GYROSCOPE]</a>, and <a data-link-type="biblio" href="#biblio-magnetometer">[MAGNETOMETER]</a>. Regardless, the fusion is platform specific and can happen in software or
hardware, i.e. on a sensor hub.</p>
   <p>For the absolute orientation sensor the value of <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading②">latest reading</a>["quaternion"] represents the rotation of a
device hosting motion sensors in relation to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="earths-reference-coordinate-system">Earth’s reference coordinate system</dfn> defined as a
three dimensional Cartesian coordinate system (x, y, z), where:</p>
   <ul>
    <li data-md>
     <p>x-axis is a vector product of y.z that is tangential to the ground and points east,</p>
    <li data-md>
     <p>y-axis is tangential to the ground and points towards magnetic north, and</p>
    <li data-md>
     <p>z-axis points towards the sky and is perpendicular to the plane made up of x and y axes.</p>
   </ul>
   <p>The device’s <a data-link-type="dfn" href="https://w3c.github.io/accelerometer#local-coordinate-system" id="ref-for-local-coordinate-system">local coordinate system</a> is the same as defined by <a data-link-type="dfn" href="https://w3c.github.io/sensors#low-level" id="ref-for-low-level⑤">low-level</a> motion sensors.</p>
   <p class="note" role="note"><span>Note:</span> Figure below represents the case where device’s <a data-link-type="dfn" href="https://w3c.github.io/accelerometer#local-coordinate-system" id="ref-for-local-coordinate-system①">local coordinate system</a> and the <a data-link-type="dfn" href="#earths-reference-coordinate-system" id="ref-for-earths-reference-coordinate-system①">Earth’s reference coordinate system</a> are aligned, therefore,
orientation sensor’s <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading③">latest reading</a> would represent 0 (rad) <a data-link-type="biblio" href="#biblio-si">[SI]</a> rotation about each axis.</p>
   <p><img alt="AbsoluteOrientationSensor coordinate system." src="images/absolute_orientation_sensor_coordinate_system.png" srcset="images/absolute_orientation_sensor_coordinate_system.svg" style="display: block;margin: auto;"></p>
   <h2 class="heading settled" data-level="6" id="api"><span class="secno">6. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="orientationsensor-interface"><span class="secno">6.1. </span><span class="content">The OrientationSensor Interface</span><a class="self-link" href="#orientationsensor-interface"></a></h3>
<pre class="idl highlight def"><c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array"><c- b>Float32Array</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array"><c- b>Float64Array</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dommatrix" id="ref-for-dommatrix"><c- n>DOMMatrix</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-rotationmatrixtype"><code><c- g>RotationMatrixType</c-></code></dfn>;
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="orientationsensor"><code><c- g>OrientationSensor</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/generic-sensor/#sensor" id="ref-for-sensor②"><c- n>Sensor</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>>? <dfn class="idl-code" data-dfn-for="OrientationSensor" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<double>?" id="dom-orientationsensor-quaternion"><code><c- g>quaternion</c-></code><a class="self-link" href="#dom-orientationsensor-quaternion"></a></dfn>;
  <c- b>void</c-> <dfn class="dfn-paneled idl-code" data-dfn-for="OrientationSensor" data-dfn-type="method" data-export data-lt="populateMatrix(targetMatrix)" id="dom-orientationsensor-populatematrix"><code><c- g>populateMatrix</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="#typedefdef-rotationmatrixtype" id="ref-for-typedefdef-rotationmatrixtype"><c- n>RotationMatrixType</c-></a> <dfn class="idl-code" data-dfn-for="OrientationSensor/populateMatrix(targetMatrix)" data-dfn-type="argument" data-export id="dom-orientationsensor-populatematrix-targetmatrix-targetmatrix"><code><c- g>targetMatrix</c-></code><a class="self-link" href="#dom-orientationsensor-populatematrix-targetmatrix-targetmatrix"></a></dfn>);
};
</pre>
   <h4 class="heading settled" data-level="6.1.1" id="orientationsensor-quaternion"><span class="secno">6.1.1. </span><span class="content">OrientationSensor.quaternion</span><a class="self-link" href="#orientationsensor-quaternion"></a></h4>
   <p>Returns a four-element <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-frozen-array" id="ref-for-idl-frozen-array">FrozenArray</a></code> whose elements contain the components of the unit quaternion representing the device orientation.
In other words, this attribute returns <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading④">latest reading</a>["quaternion"].</p>
   <h4 class="heading settled" data-level="6.1.2" id="orientationsensor-populatematrix"><span class="secno">6.1.2. </span><span class="content">OrientationSensor.populateMatrix()</span><a class="self-link" href="#orientationsensor-populatematrix"></a></h4>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-orientationsensor-populatematrix" id="ref-for-dom-orientationsensor-populatematrix">populateMatrix()</a></code> method  populates the given object with rotation matrix
which is converted from the value of <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading⑤">latest reading</a>["quaternion"] <a data-link-type="biblio" href="#biblio-quatconv">[QUATCONV]</a>, as shown below:</p>
   <p><img alt="Converting quaternion to rotation matrix." height="50%" src="images/quaternion_to_rotation_matrix.png" style="display: block;margin: auto;" width="50%"></p>
   <p>where:</p>
   <ul>
    <li data-md>
     <p>W = cos(θ/2)</p>
    <li data-md>
     <p>X = V<sub>x</sub> * sin(θ/2)</p>
    <li data-md>
     <p>Y = V<sub>y</sub> * sin(θ/2)</p>
    <li data-md>
     <p>Z = V<sub>z</sub> * sin(θ/2)</p>
   </ul>
   <p>The rotation matrix is flattened in <var>targetMatrix</var> object according to the column-major order, as described in <a data-link-type="dfn" href="#populate-rotation-matrix" id="ref-for-populate-rotation-matrix">populate rotation matrix</a> algorighm.</p>
   <div class="algorithm" data-algorithm="populate rotation matrix">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="populate-rotation-matrix">populate rotation matrix</dfn>, the <code class="idl"><a data-link-type="idl" href="#dom-orientationsensor-populatematrix" id="ref-for-dom-orientationsensor-populatematrix①">populateMatrix()</a></code> method must
run these steps or their <a data-link-type="dfn" href="https://w3c.github.io/sensors#equivalent" id="ref-for-equivalent">equivalent</a>: 
    <ol>
     <li data-md>
      <p>If <var>targetMatrix</var> is not of type defined by <code class="idl"><a data-link-type="idl" href="#typedefdef-rotationmatrixtype" id="ref-for-typedefdef-rotationmatrixtype①">RotationMatrixType</a></code> union, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a
  "<code class="idl"><a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror">TypeError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort these steps.</p>
     <li data-md>
      <p>If <var>targetMatrix</var> is of type <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①">Float32Array</a></code> or <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array①">Float64Array</a></code> with a size less than sixteen, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a
  "<code class="idl"><a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①">TypeError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> and abort these steps.</p>
     <li data-md>
      <p>Let <var>quaternion</var> be the value of <a data-link-type="dfn" href="https://w3c.github.io/sensors#latest-reading" id="ref-for-latest-reading⑥">latest reading</a>["quaternion"]</p>
     <li data-md>
      <p>If <var>quaternion</var> is <code>null</code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a "<code class="idl"><a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#notreadableerror" id="ref-for-notreadableerror">NotReadableError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code> and abort these steps.</p>
     <li data-md>
      <p>Let <var>x</var> be the value of <var>quaternion</var>[0]</p>
     <li data-md>
      <p>Let <var>y</var> be the value of <var>quaternion</var>[1]</p>
     <li data-md>
      <p>Let <var>z</var> be the value of <var>quaternion</var>[2]</p>
     <li data-md>
      <p>Let <var>w</var> be the value of <var>quaternion</var>[3]</p>
     <li data-md>
      <p>If <var>targetMatrix</var> is of <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array②">Float32Array</a></code> or <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array②">Float64Array</a></code> type, run these sub-steps:</p>
      <ol>
       <li data-md>
        <p>Set <var>targetMatrix</var>[0] = 1 - 2 * y * y - 2 * z * z</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[1] = 2 * x * y - 2 * z * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[2] = 2 * x * z + 2 * y * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[3] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[4] = 2 * x * y + 2 * z * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[5] = 1 - 2 * x * x - 2 * z * z</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[6] = 2 * y * z - 2 * x * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[7] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[8] = 2 * x * z - 2 * y * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[9] = 2 * y * z + 2 * x * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[10] = 1 - 2 * x * x - 2 * y * y</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[11] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[12] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[13] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[14] = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>[15] = 1</p>
      </ol>
     <li data-md>
      <p>If <var>targetMatrix</var> is of <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/geometry-1/#dommatrix" id="ref-for-dommatrix①">DOMMatrix</a></code> type, run these sub-steps:</p>
      <ol>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m11 = 1 - 2 * y * y - 2 * z * z</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m12 = 2 * x * y - 2 * z * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m13 = 2 * x * z + 2 * y * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m14 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m21 = 2 * x * y + 2 * z * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m22 = 1 - 2 * x * x - 2 * z * z</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m23 = 2 * y * z - 2 * x * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m24 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m31 = 2 * x * z - 2 * y * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m32 = 2 * y * z + 2 * x * w</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m33 = 1 - 2 * x * x - 2 * y * y</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m34 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m41 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m42 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m43 = 0</p>
       <li data-md>
        <p>Set <var>targetMatrix</var>.m44 = 1</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="6.2" id="absoluteorientationsensor-interface"><span class="secno">6.2. </span><span class="content">The AbsoluteOrientationSensor Interface</span><a class="self-link" href="#absoluteorientationsensor-interface"></a></h3>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="AbsoluteOrientationSensor" data-dfn-type="constructor" data-export data-lt="AbsoluteOrientationSensor(sensorOptions)|AbsoluteOrientationSensor()" id="dom-absoluteorientationsensor-absoluteorientationsensor"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-absoluteorientationsensor-absoluteorientationsensor"></a></dfn>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/generic-sensor/#dictdef-sensoroptions" id="ref-for-dictdef-sensoroptions①"><c- n>SensorOptions</c-></a> <dfn class="idl-code" data-dfn-for="AbsoluteOrientationSensor/AbsoluteOrientationSensor(sensorOptions)" data-dfn-type="argument" data-export id="dom-absoluteorientationsensor-absoluteorientationsensor-sensoroptions-sensoroptions"><code><c- g>sensorOptions</c-></code><a class="self-link" href="#dom-absoluteorientationsensor-absoluteorientationsensor-sensoroptions-sensoroptions"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="absoluteorientationsensor"><code><c- g>AbsoluteOrientationSensor</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#orientationsensor" id="ref-for-orientationsensor⑥"><c- n>OrientationSensor</c-></a> {
};
</pre>
   <p>To <dfn data-dfn-type="dfn" data-noexport id="construct-an-absoluteorientationsensor-object">Construct an AbsoluteOrientationSensor Object<a class="self-link" href="#construct-an-absoluteorientationsensor-object"></a></dfn> the user agent must invoke the <a data-link-type="dfn" href="https://w3c.github.io/sensors#construct-sensor-object" id="ref-for-construct-sensor-object">construct a Sensor object</a> abstract operation.</p>
   <h2 class="heading settled" data-level="7" id="acknowledgements"><span class="secno">7. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Tobie Langel for the work on Generic Sensor API.</p>
   <h2 class="heading settled" data-level="8" id="conformance"><span class="secno">8. </span><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p>Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words "MUST",
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.</p>
   <p>All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
   <p>A <dfn data-dfn-type="dfn" data-noexport id="conformant-user-agent">conformant user agent<a class="self-link" href="#conformant-user-agent"></a></dfn> must implement all the requirements
listed in this specification that are applicable to user agents.</p>
   <p>The IDL fragments in this specification must be interpreted as required for
conforming IDL fragments, as described in the Web IDL specification. <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a></p>
  </main>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-absoluteorientationsensor-absoluteorientationsensor">AbsoluteOrientationSensor()</a><span>, in §6.2</span>
   <li><a href="#absoluteorientationsensor">AbsoluteOrientationSensor</a><span>, in §6.2</span>
   <li><a href="#dom-absoluteorientationsensor-absoluteorientationsensor">AbsoluteOrientationSensor(sensorOptions)</a><span>, in §6.2</span>
   <li><a href="#conformant-user-agent">conformant user agent</a><span>, in §8</span>
   <li><a href="#construct-an-absoluteorientationsensor-object">Construct an AbsoluteOrientationSensor Object</a><span>, in §6.2</span>
   <li><a href="#earths-reference-coordinate-system">Earth’s reference coordinate system</a><span>, in §5</span>
   <li><a href="#orientationsensor">OrientationSensor</a><span>, in §6.1</span>
   <li><a href="#dom-orientationsensor-populatematrix">populateMatrix(targetMatrix)</a><span>, in §6.1</span>
   <li><a href="#populate-rotation-matrix">populate rotation matrix</a><span>, in §6.1.2</span>
   <li><a href="#dom-orientationsensor-quaternion">quaternion</a><span>, in §6.1</span>
   <li><a href="#typedefdef-rotationmatrixtype">RotationMatrixType</a><span>, in §6.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-acceleration">
   <a href="https://w3c.github.io/accelerometer#acceleration">https://w3c.github.io/accelerometer#acceleration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-acceleration">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-local-coordinate-system">
   <a href="https://w3c.github.io/accelerometer#local-coordinate-system">https://w3c.github.io/accelerometer#local-coordinate-system</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-coordinate-system">5. Model</a> <a href="#ref-for-local-coordinate-system①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-deviceorientation_event">
   <a href="https://www.w3.org/TR/orientation-event#deviceorientation_event">https://www.w3.org/TR/orientation-event#deviceorientation_event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deviceorientation_event">1. Introduction</a> <a href="#ref-for-deviceorientation_event①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sensor">
   <a href="https://www.w3.org/TR/generic-sensor/#sensor">https://www.w3.org/TR/generic-sensor/#sensor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sensor">5. Model</a>
    <li><a href="#ref-for-sensor②">6.1. The OrientationSensor Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-sensoroptions">
   <a href="https://www.w3.org/TR/generic-sensor/#dictdef-sensoroptions">https://www.w3.org/TR/generic-sensor/#dictdef-sensoroptions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-sensoroptions">1. Introduction</a>
    <li><a href="#ref-for-dictdef-sensoroptions①">6.2. The AbsoluteOrientationSensor Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-construct-sensor-object">
   <a href="https://w3c.github.io/sensors#construct-sensor-object">https://w3c.github.io/sensors#construct-sensor-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-construct-sensor-object">6.2. The AbsoluteOrientationSensor Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-equivalent">
   <a href="https://w3c.github.io/sensors#equivalent">https://w3c.github.io/sensors#equivalent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-equivalent">6.1.2. OrientationSensor.populateMatrix()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-high-level">
   <a href="https://w3c.github.io/sensors#high-level">https://w3c.github.io/sensors#high-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-high-level">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-latest-reading">
   <a href="https://w3c.github.io/sensors#latest-reading">https://w3c.github.io/sensors#latest-reading</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-latest-reading">5. Model</a> <a href="#ref-for-latest-reading①">(2)</a> <a href="#ref-for-latest-reading②">(3)</a> <a href="#ref-for-latest-reading③">(4)</a>
    <li><a href="#ref-for-latest-reading④">6.1.1. OrientationSensor.quaternion</a>
    <li><a href="#ref-for-latest-reading⑤">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-latest-reading⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-low-level">
   <a href="https://w3c.github.io/sensors#low-level">https://w3c.github.io/sensors#low-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-low-level">1. Introduction</a>
    <li><a href="#ref-for-low-level①">5. Model</a> <a href="#ref-for-low-level②">(2)</a> <a href="#ref-for-low-level③">(3)</a> <a href="#ref-for-low-level④">(4)</a> <a href="#ref-for-low-level⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-request-sensor-access">
   <a href="https://www.w3.org/TR/generic-sensor/#request-sensor-access">https://www.w3.org/TR/generic-sensor/#request-sensor-access</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request-sensor-access">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sensor">
   <a href="https://w3c.github.io/sensors#sensor">https://w3c.github.io/sensors#sensor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sensor①">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sensor-fusion">
   <a href="https://w3c.github.io/sensors#sensor-fusion">https://w3c.github.io/sensors#sensor-fusion</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sensor-fusion">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dommatrix">
   <a href="https://www.w3.org/TR/geometry-1/#dommatrix">https://www.w3.org/TR/geometry-1/#dommatrix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dommatrix">6.1. The OrientationSensor Interface</a>
    <li><a href="#ref-for-dommatrix①">6.1.2. OrientationSensor.populateMatrix()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angular-velocity">
   <a href="https://w3c.github.io/gyroscope#angular-velocity">https://w3c.github.io/gyroscope#angular-velocity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angular-velocity">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-entry">
   <a href="https://infra.spec.whatwg.org/#map-entry">https://infra.spec.whatwg.org/#map-entry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-entry">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-key">
   <a href="https://infra.spec.whatwg.org/#map-key">https://infra.spec.whatwg.org/#map-key</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-key">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">5. Model</a> <a href="#ref-for-list①">(2)</a> <a href="#ref-for-list②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-value">
   <a href="https://infra.spec.whatwg.org/#map-value">https://infra.spec.whatwg.org/#map-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-value">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-magnetic-field">
   <a href="https://w3c.github.io/magnetometer#magnetic-field">https://w3c.github.io/magnetometer#magnetic-field</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-magnetic-field">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-absolute-orientation">
   <a href="https://w3c.github.io/motion-sensors#absolute-orientation">https://w3c.github.io/motion-sensors#absolute-orientation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolute-orientation">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-idl-DOMException①">(2)</a> <a href="#ref-for-idl-DOMException②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-Float32Array">
   <a href="https://heycam.github.io/webidl/#idl-Float32Array">https://heycam.github.io/webidl/#idl-Float32Array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-Float32Array">6.1. The OrientationSensor Interface</a>
    <li><a href="#ref-for-idl-Float32Array①">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-idl-Float32Array②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-Float64Array">
   <a href="https://heycam.github.io/webidl/#idl-Float64Array">https://heycam.github.io/webidl/#idl-Float64Array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-Float64Array">6.1. The OrientationSensor Interface</a>
    <li><a href="#ref-for-idl-Float64Array①">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-idl-Float64Array②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-frozen-array">
   <a href="https://heycam.github.io/webidl/#idl-frozen-array">https://heycam.github.io/webidl/#idl-frozen-array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-frozen-array">6.1.1. OrientationSensor.quaternion</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notreadableerror">
   <a href="https://heycam.github.io/webidl/#notreadableerror">https://heycam.github.io/webidl/#notreadableerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notreadableerror">6.1.2. OrientationSensor.populateMatrix()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-exceptiondef-typeerror">
   <a href="https://heycam.github.io/webidl/#exceptiondef-typeerror">https://heycam.github.io/webidl/#exceptiondef-typeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-exceptiondef-typeerror">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-exceptiondef-typeerror①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">6.1. The OrientationSensor Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[ACCELEROMETER]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-acceleration" style="color:initial">acceleration</span>
     <li><span class="dfn-paneled" id="term-for-local-coordinate-system" style="color:initial">local coordinate system</span>
    </ul>
   <li>
    <a data-link-type="biblio">[deviceorientation]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-deviceorientation_event" style="color:initial">DeviceOrientationEvent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[GENERIC-SENSOR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sensor" style="color:initial">Sensor</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-sensoroptions" style="color:initial">SensorOptions</span>
     <li><span class="dfn-paneled" id="term-for-construct-sensor-object" style="color:initial">construct a sensor object</span>
     <li><span class="dfn-paneled" id="term-for-equivalent" style="color:initial">equivalent</span>
     <li><span class="dfn-paneled" id="term-for-high-level" style="color:initial">high-level</span>
     <li><span class="dfn-paneled" id="term-for-latest-reading" style="color:initial">latest reading</span>
     <li><span class="dfn-paneled" id="term-for-low-level" style="color:initial">low-level</span>
     <li><span class="dfn-paneled" id="term-for-request-sensor-access" style="color:initial">request sensor access</span>
     <li><span class="dfn-paneled" id="term-for-sensor①" style="color:initial">sensor</span>
     <li><span class="dfn-paneled" id="term-for-sensor-fusion" style="color:initial">sensor-fusion</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dommatrix" style="color:initial">DOMMatrix</span>
    </ul>
   <li>
    <a data-link-type="biblio">[GYROSCOPE]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angular-velocity" style="color:initial">angular velocity</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-map-entry" style="color:initial">entry</span>
     <li><span class="dfn-paneled" id="term-for-map-key" style="color:initial">key</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-map-value" style="color:initial">value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[MAGNETOMETER]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-magnetic-field" style="color:initial">magnetic field</span>
    </ul>
   <li>
    <a data-link-type="biblio">[motionsensors]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-absolute-orientation" style="color:initial">absolute orientation sensor</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-Float32Array" style="color:initial">Float32Array</span>
     <li><span class="dfn-paneled" id="term-for-idl-Float64Array" style="color:initial">Float64Array</span>
     <li><span class="dfn-paneled" id="term-for-idl-frozen-array" style="color:initial">FrozenArray</span>
     <li><span class="dfn-paneled" id="term-for-notreadableerror" style="color:initial">NotReadableError</span>
     <li><span class="dfn-paneled" id="term-for-exceptiondef-typeerror" style="color:initial">TypeError</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-accelerometer">[ACCELEROMETER]
   <dd>Anssi Kostiainen. <a href="https://www.w3.org/TR/accelerometer/">Accelerometer</a>. 7 March 2019. WD. URL: <a href="https://www.w3.org/TR/accelerometer/">https://www.w3.org/TR/accelerometer/</a>
   <dt id="biblio-generic-sensor">[GENERIC-SENSOR]
   <dd>Mikhail Pozdnyakov; Alexander Shalamov; Tobie Langel. <a href="https://www.w3.org/TR/generic-sensor/">Generic Sensor API</a>. 7 March 2019. WD. URL: <a href="https://www.w3.org/TR/generic-sensor/">https://www.w3.org/TR/generic-sensor/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-gyroscope">[GYROSCOPE]
   <dd>Anssi Kostiainen. <a href="https://www.w3.org/TR/gyroscope/">Gyroscope</a>. 7 March 2019. WD. URL: <a href="https://www.w3.org/TR/gyroscope/">https://www.w3.org/TR/gyroscope/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-magnetometer">[MAGNETOMETER]
   <dd>Anssi Kostiainen; Rijubrata Bhaumik. <a href="https://www.w3.org/TR/magnetometer/">Magnetometer</a>. 7 March 2019. WD. URL: <a href="https://www.w3.org/TR/magnetometer/">https://www.w3.org/TR/magnetometer/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-quatconv">[QUATCONV]
   <dd>Watt, Alan H., and Mark Watt.. <a href="http://www.cs.cmu.edu/afs/cs/academic/class/15462-s14/www/lec_slides/3DRotationNotes.pdf">Advanced animation and rendering techniques., page 362</a>. 1992. Informational. URL: <a href="http://www.cs.cmu.edu/afs/cs/academic/class/15462-s14/www/lec_slides/3DRotationNotes.pdf">http://www.cs.cmu.edu/afs/cs/academic/class/15462-s14/www/lec_slides/3DRotationNotes.pdf</a>
   <dt id="biblio-quaternions">[QUATERNIONS]
   <dd>Kuipers, Jack B. <a href="http://www.emis.ams.org/proceedings/Varna/vol1/GEOM09.pdf">Quaternions and rotation sequences. Vol. 66.</a>. 1999. Informational. URL: <a href="http://www.emis.ams.org/proceedings/Varna/vol1/GEOM09.pdf">http://www.emis.ams.org/proceedings/Varna/vol1/GEOM09.pdf</a>
   <dt id="biblio-si">[SI]
   <dd><a href="http://www.bipm.org/en/publications/si-brochure/">SI Brochure: The International System of Units (SI), 8th edition</a>. 2014. URL: <a href="http://www.bipm.org/en/publications/si-brochure/">http://www.bipm.org/en/publications/si-brochure/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array③"><c- b>Float32Array</c-></a> <c- b>or</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array③"><c- b>Float64Array</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/geometry-1/#dommatrix" id="ref-for-dommatrix②"><c- n>DOMMatrix</c-></a>) <a href="#typedefdef-rotationmatrixtype"><code><c- g>RotationMatrixType</c-></code></a>;
<c- b>interface</c-> <a href="#orientationsensor"><code><c- g>OrientationSensor</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/generic-sensor/#sensor" id="ref-for-sensor②①"><c- n>Sensor</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a>>? <a data-readonly data-type="FrozenArray<double>?" href="#dom-orientationsensor-quaternion"><code><c- g>quaternion</c-></code></a>;
  <c- b>void</c-> <a href="#dom-orientationsensor-populatematrix"><code><c- g>populateMatrix</c-></code></a>(<a class="n" data-link-type="idl-name" href="#typedefdef-rotationmatrixtype" id="ref-for-typedefdef-rotationmatrixtype②"><c- n>RotationMatrixType</c-></a> <a href="#dom-orientationsensor-populatematrix-targetmatrix-targetmatrix"><code><c- g>targetMatrix</c-></code></a>);
};

[<a href="#dom-absoluteorientationsensor-absoluteorientationsensor"><code><c- g>Constructor</c-></code></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/generic-sensor/#dictdef-sensoroptions" id="ref-for-dictdef-sensoroptions①①"><c- n>SensorOptions</c-></a> <a href="#dom-absoluteorientationsensor-absoluteorientationsensor-sensoroptions-sensoroptions"><code><c- g>sensorOptions</c-></code></a>)]
<c- b>interface</c-> <a href="#absoluteorientationsensor"><code><c- g>AbsoluteOrientationSensor</c-></code></a> : <a class="n" data-link-type="idl-name" href="#orientationsensor" id="ref-for-orientationsensor⑥①"><c- n>OrientationSensor</c-></a> {
};

</pre>
  <aside class="dfn-panel" data-for="earths-reference-coordinate-system">
   <b><a href="#earths-reference-coordinate-system">#earths-reference-coordinate-system</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-earths-reference-coordinate-system">1. Introduction</a>
    <li><a href="#ref-for-earths-reference-coordinate-system①">5. Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedefdef-rotationmatrixtype">
   <b><a href="#typedefdef-rotationmatrixtype">#typedefdef-rotationmatrixtype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedefdef-rotationmatrixtype">6.1. The OrientationSensor Interface</a>
    <li><a href="#ref-for-typedefdef-rotationmatrixtype①">6.1.2. OrientationSensor.populateMatrix()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="orientationsensor">
   <b><a href="#orientationsensor">#orientationsensor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-orientationsensor">1. Introduction</a> <a href="#ref-for-orientationsensor①">(2)</a> <a href="#ref-for-orientationsensor②">(3)</a> <a href="#ref-for-orientationsensor③">(4)</a>
    <li><a href="#ref-for-orientationsensor④">5. Model</a> <a href="#ref-for-orientationsensor⑤">(2)</a>
    <li><a href="#ref-for-orientationsensor⑥">6.2. The AbsoluteOrientationSensor Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-orientationsensor-populatematrix">
   <b><a href="#dom-orientationsensor-populatematrix">#dom-orientationsensor-populatematrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-orientationsensor-populatematrix">6.1.2. OrientationSensor.populateMatrix()</a> <a href="#ref-for-dom-orientationsensor-populatematrix①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="populate-rotation-matrix">
   <b><a href="#populate-rotation-matrix">#populate-rotation-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-populate-rotation-matrix">6.1.2. OrientationSensor.populateMatrix()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="absoluteorientationsensor">
   <b><a href="#absoluteorientationsensor">#absoluteorientationsensor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absoluteorientationsensor">1. Introduction</a>
    <li><a href="#ref-for-absoluteorientationsensor①">5. Model</a> <a href="#ref-for-absoluteorientationsensor②">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>